<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
          <div class="mui-media-body">
            <img :src="this.singerIntro.avatar_s180" alt />
            <p>姓名：{{this.singerIntro.name}}</p>
            <p>地区：中国{{this.singerIntro.country}}</p>
            <p>星座：{{this.singerIntro.constellation}}</p>
            <p>身高：{{this.singerIntro.stature}}kg</p>
            <p>体重：{{this.singerIntro.weight}}</p>
            <p>血型：{{this.singerIntro.bloodtype}}</p>
            <p>生日：{{this.singerIntro.birth}}</p>
            <p>专辑数量：{{this.singerIntro.albums_total}}</p>
            <p>歌曲数量：{{this.singerIntro.songs_total}}</p>
            <p>简介：</p>
            <textarea id="intro" v-model="this.singerIntro.intro" cols="30" rows="10"></textarea>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      singerIntro: [] //存放歌手简介
    };
  },
  created() {
    this.getSongLIst();
  },
  methods: {
    getSongLIst() {
      const songsURL =
        this.HOST +
        "/v1/restserver/ting?method=baidu.ting.artist.getSongList&limits=10&tinguid=" +
        this.$route.params.id;
      this.$axios
        .get(songsURL)
        .then(res => {
          this.singerIntro = res.data.artistinfo;
          // console.log(res.data.artistinfo);
          // console.log(res.data);
        })
        .catch();
    }
  }
};
</script>
<style scoped>
.mui-media-body img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
  word-wrap: break-word;
}
.mui-media-body textarea {
  font-size: 12px;
}
</style>